<template>
  <div style="margin:0;padding:0;height:100%;width:100%;">
    <!-- dataV大屏可视化 -->
    <dv-full-screen-container style="background:#000;height:100%;width:100%;">
      <!-- 头部 -->
      <div style="display:flex">
        <div style="flex:1;width:100%">
          <dv-decoration-1 style="width:100%;" />
        </div>
        <div
          style="flex:1;"
          class="title"
        >大屏可视化</div>
        <div style="flex:1">
          <dv-decoration-1 style="width:100%;transform:rotateY(180deg);" />
        </div>
      </div>
      <dv-decoration-5 style="width:100%;height:40px;margin:0px auto 10px" />
      <!-- 第一行 -->
      <div class="box">
        <!-- 左边 -->
        <div style="flex:0 1 50%;">
          <dv-border-box-1 style="width:100%;height:200px">
            <div
              :key="key"
              style="color:rgb(183, 224, 15);text-align:center"
            >本周温度曲线图</div>
            <!-- 图表 -->
            <lineChart style="width:100%;height:200px" />
          </dv-border-box-1>
        </div>
        <!-- 右边 -->
        <div style="flex:0 1 50%;">
          <dv-border-box-8 style="width:100%;height:200px">
            <div style="color:orange;text-align:center">胶囊柱图</div>
            <dv-capsule-chart
              :config="config"
              style="height:94%;width:100%"
            />
          </dv-border-box-8>
        </div>
      </div>
      <!-- 第二行 -->
      <div class="box">
        <!-- 左边 -->
        <div style="flex:0 1 25%;">
          <dv-border-box-8 style="width:100%;height:200px">
            <dv-active-ring-chart
              :config="config"
              style="height:100%;width:100%"
            />
          </dv-border-box-8>
          <dv-border-box-9 style="width:100%;height:200px">
            <div style="display:flex; ">
              <div style="color:#fff;height:200px;line-height:200px;font-size:26px;flex:0 1 30%;padding-left:20%">数量:</div>
              <div style="flex:0 1 30%">
                <dv-digital-flop
                  :config="config3"
                  style="width:100%;height:200px;"
                />
              </div>
            </div>
          </dv-border-box-9>
        </div>
        <!-- 中间 -->
        <div style="flex:0 1 50%;">
          <dv-border-box-8 style="width:100%;height:400px">
            <dv-flyline-chart
              :config="config2"
              style="width:100%;height:100%;"
            />
          </dv-border-box-8>
        </div>
        <!-- 右边 -->
        <div style="flex:0 1 25%;">
          <dv-border-box-9 style="width:100%;height:200px">
            <funnelChart style="width:100%;height:100%;" />
          </dv-border-box-9>
          <dv-border-box-1 style="width:100%;height:200px">
            <div style="color:#fff;height:20px;text-align:center">水位图</div>
            <div style="width:100%">
              <dv-water-level-pond
                :config="config5"
                style="width:50%;height:150px;margin:5px auto"
              />
            </div>
          </dv-border-box-1>
        </div>
      </div>
      <!-- 第三行 -->
      <div class="box">
        <!-- 左边 -->
        <div style="flex:0 1 50%;">
          <dv-border-box-9 style="width:100%;height:220px">
            <dv-decoration-3 style="width:150px;height:30px;" />
            <barChart style="width:100%;height:90%" />
          </dv-border-box-9>
        </div>
        <!-- 右边 -->
        <div style="flex:0 1 50%;">
          <dv-border-box-8 style="width:100%;height:220px">
            <div style="color:aquamarine;width:100%;height:20px;text-align:center">滚动列表</div>
            <div style="width:100%">
              <dv-scroll-board
                :config="config4"
                style="width:96%;height:190px;margin:2px auto"
              />
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import lineChart from "./components/lineChart.vue";
import barChart from "./components/barChart.vue";
import funnelChart from "./components/funnelChart.vue";
export default {
  components: { lineChart, barChart, funnelChart },
  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          }
        ]
      },
      //   胶囊图
      config1: {
        data: [
          {
            name: "南阳",
            value: 167
          },
          {
            name: "周口",
            value: 123
          },
          {
            name: "漯河",
            value: 98
          },
          {
            name: "郑州",
            value: 75
          },
          {
            name: "西峡",
            value: 66
          }
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "单位",
        showValue: true
      },
      //   地图
      config2: {
        centerPoint: [0.48, 0.35],
        points: [
          {
            position: [0.52, 0.235],
            text: "新乡"
          },
          {
            position: [0.43, 0.29],
            text: "焦作"
          },
          {
            position: [0.59, 0.35],
            text: "开封"
          },
          {
            position: [0.53, 0.47],
            text: "许昌"
          },
          {
            position: [0.45, 0.54],
            text: "平顶山"
          },
          {
            position: [0.36, 0.38],
            text: "洛阳"
          },
          {
            position: [0.62, 0.55],
            text: "周口"
          },
          {
            position: [0.56, 0.56],
            text: "漯河"
          },
          {
            position: [0.37, 0.66],
            text: "南阳"
          },
          {
            position: [0.55, 0.81],
            text: "信阳"
          },
          {
            position: [0.55, 0.67],
            text: "驻马店"
          },
          {
            position: [0.37, 0.29],
            text: "济源"
          },
          {
            position: [0.2, 0.36],
            text: "三门峡"
          },
          {
            position: [0.76, 0.41],
            text: "商丘"
          },
          {
            position: [0.59, 0.18],
            text: "鹤壁"
          },
          {
            position: [0.68, 0.17],
            text: "濮阳"
          },
          {
            position: [0.59, 0.1],
            text: "安阳"
          }
        ]
      },
      config3: {
        number: [100],
        content: "{nt}个"
      },
      //列表
      config4: {
        header: ["省份", "市", "备注"],
        data: [
          ["黑龙江", "哈尔滨", "行1列3"],
          ["吉林", "长春", "行2列3"],
          ["内蒙古自治区", "呼和浩特", "行3列3"],
          ["北京", "北京", "行4列3"],
          ["河北", "石家庄", "行5列3"],
          ["山东", "济南", "行6列3"],
          ["山西", "太原", "行7列3"],
          ["陕西", "西安", "行8列3"],
          ["四川", "成都", "行9列3"],
          ["河南", "郑州", "行10列3"]
        ],
        index: true,
        columnWidth: [50],
        align: ["center"]
      },
      // 水位图
      config5: {
        data: [66, 45],
        shape: "roundRect"
      },
      key: 1
    };
  },
  created() {},
  mounted() {
    this.key++;
  },
  methods: {}
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  
}
.title {
  text-align: center;
  font-size: 32px;
  color: aquamarine;
  margin-bottom: -15px;
  padding-top: 10px;
  
}
</style>